<template>
    <div>
        <div class="yesterdayCnsume">昨日医疗器材消耗占比</div>
        <div id="yesterdayCnsume"></div>
    </div>
</template>

<script setup lang="ts">
import {onMounted} from 'vue'
import { Chart, getTheme } from '@antv/g2';

const data = [
    { type: '一次性穿刺器', population: 70 },
    { type: '一次性使用无菌注射器', population: 340 },
    { type: '医用手套', population: 337 },
    { type: '无菌注射器', population: 800 },
    { type: '灭菌脱脂棉球', population: 258 },
    { type: '真空采血管', population: 317 },
    { type: '无菌注射器', population: 337},
    { type: '中心静脉导管(单腔)', population: 465 },
];

onMounted(()=>{
    const chart = new Chart({
    container: 'yesterdayCnsume',
    autoFit: true,
    height: 400,
});
chart.data(data);
chart.coordinate('polar', {
    innerRadius: 0.2,
});
chart.legend('type', {
    position: 'right',
});
chart.axis(false);
chart.tooltip({
    showMarkers: false
});
chart.interaction('element-highlight');
chart
    .interval()
    .position('type*population')
    .color('type')
    .style({
        lineWidth: 1,
        stroke: '#fff',
    });
chart.theme({ "styleSheet": { "brandColor": "#FF6B3B", "paletteQualitative10": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA"], "paletteQualitative20": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA", "#2BCB95", "#B1ABF4", "#1D42C2", "#1D9ED1", "#D64BC0", "#255634", "#8C8C47", "#8CDAE5", "#8E283B", "#791DC9"] } });
chart.render();
})

</script>

<style scoped>
.yesterdayCnsume{
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}
</style>